articles

Home / DeveloperSection / Articles / CURD Operations in ASP.NET MVC using jQuery dialog with EF

Ask Question

CURD Operations in ASP.NET MVC using jQuery dialog with EF

Anupam Mishra8375 15-Mar-2016
Introduction: 

In this article I will try to demonstrate, CURD (Create, Update, Delete, and Retrieve) operation using jQuery dialog with entity framework. In this scenario, I have using code first approach. For this I have using following Employee model with its EmployeeDBContext file:

publicclassEmployee
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        publicint EmpID { get; set; }
        [Required]
        [Display(Name = "Full Name")]
        publicstring FullName { get; set; }
        [Required]
        [Display(Name = "Email-id")]
        [DataType(DataType.EmailAddress)]
        publicstring Email { get; set; }
        [Display(Name = "Address")]
        publicstring Address { get; set; }
        [Display(Name = "Country")]
        publicstring Town { get; set; }
        [Display(Name = "Mobile Number")]
        publicint Mobile_No { get; set; }
    }
    publicclassEmployeeDBContext : DbContext
    {
        publicDbSet<Employee> Employees { get; set; }
    }

For more details about Code first approach click below link:

Code First Approach in Entity framework 

Index View for Curd Operation using jQuery: 
@model IEnumerable<CURD_Jquery.Models.Employee>
@{
    ViewBag.Title = "Index";
    Layout = null;
}
<scriptsrc="~/Scripts/jquery-1.8.2.js"></script>
<scriptsrc="~/Scripts/jquery-ui-1.8.24.js"></script>
<linkhref="~/Content/themes/base/jquery-ui.css"rel="stylesheet"/>
<script>
    $(document).ready(function () {
        var url = "";
        $("#dialog-alert").dialog({
            autoOpen: false,
            resizable: true,
            height: 100,
            width: 350,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
 
                }
            }
        });
        if ('@TempData["msg"]' != "") {
            $("#dialog-alert").dialog('open');
        }
        $("#Emp-edit").dialog({
            title: 'Create Employee',
            autoOpen: false,
            resizable: true,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            }
        });
        $("#Emp-delete").dialog({
            title: 'Delete Employee',
            autoOpen: false,
            resizable: true,
            height: 170,
            width: 350,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: false,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    window.location.href = url;
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#Emp-detail").dialog({
            title: 'View Employee',
            autoOpen: false,
            resizable: true,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#EmpCreate").live("click", function (e) {
            url = $(this).attr('href');
            $("#Emp-edit").dialog('open');
            debugger;
            returnfalse;
        });
        $(".EmpEdit").live("click", function (e) {
            url = $(this).attr('href');
            $(".ui-dialog-title").html("Update Employee");
            $("#Emp-edit").dialog('open');
            returnfalse;
        });
        $(".EmpDelete").live("click", function (e) {
            url = $(this).attr('href');
            $("#Emp-delete").dialog('open');
            returnfalse;
        });
        $(".EmpDetail").live("click", function (e) {
            url = $(this).attr('href');
            $("#Emp-detail").dialog('open');
            returnfalse;
        });
        $("#btncancel").live("click", function (e) {
            $("#Emp-edit").dialog("close");
            returnfalse;
        });
    });
</script>
<divid="dialog-alert"style="display: none">
    <p>
        @TempData["msg"]!
    </p>
</div>
<divid="Emp-delete"style="display: none">
    <p>
        <spanclass="ui-icon ui-icon-alert"style="float: left; margin: 07px20px0;"></span>
        Are you sure want to delete?
    </p>
</div>
 
<divid="Emp-edit"style="display: none">
</div>
<divid="Emp-detail"style="display: none">
</div>
<divstyle="padding-left: 200px">
    <h2>Employee Index</h2>
    <p>
        @Html.ActionLink("Create New", "Create", null, new { id = "EmpCreate" })
    </p>
    <tablecellspacing=" 12">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FullName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Town)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Mobile_No)
            </th>
            <th>Actions
            </th>
 
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem=> item.FullName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Town)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Mobile_No)
                </td>
                <td>
  @Html.ActionLink("Edit", "Edit", new { id = item.EmpID }, new { @class = "EmpEdit" }) |
  @Html.ActionLink("Details", "Details", new { id = item.EmpID }, new { @class = "EmpDetail" }) |
  @Html.ActionLink("Delete", "Delete", new { id = item.EmpID }, new { @class = "EmpDelete" })
                </td>
            </tr>
        }
    </table>
</div>
<style>
    tabletr:nth-child(even) {
        background-color: #eee;
    }
    tabletr:nth-child(odd) {
        background-color: #fff;
    }
    tableth {
        background-color: #ef3e0d;
        color: white;
    }
    table {
        border: 1pxsolidblack;
        width: 60%;
        height: 30%;
    }
</style>

 

Output:


CURD Operations in ASP.NET MVC using jQuery dialog with EF

 Create View :


 
@model CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Create";
}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Employee</legend>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.FullName)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.FullName)
            @Html.ValidationMessageFor(model => model.FullName)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Town)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Town)
            @Html.ValidationMessageFor(model => model.Town)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Mobile_No)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Mobile_No)
            @Html.ValidationMessageFor(model => model.Mobile_No)
        </div>
 
        <p>
            <inputtype="submit"value="Create"/>
        </p>
    </fieldset>
}
 
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
 


Output:


CURD Operations in ASP.NET MVC using jQuery dialog with EF

CURD Operations in ASP.NET MVC using jQuery dialog with EF


CURD Operations in ASP.NET MVC using jQuery dialog with EF


Edit  View:



@model CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Edit";
}
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Employee</legend>
 
        @Html.HiddenFor(model => model.EmpID)
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.FullName)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.FullName)
            @Html.ValidationMessageFor(model => model.FullName)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Town)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Town)
            @Html.ValidationMessageFor(model => model.Town)
        </div>
 
        <divclass="editor-label">
            @Html.LabelFor(model => model.Mobile_No)
        </div>
        <divclass="editor-field">
            @Html.EditorFor(model => model.Mobile_No)
            @Html.ValidationMessageFor(model => model.Mobile_No)
        </div>
 
        <p>
            <inputtype="submit"value="Save"/>
        </p>
    </fieldset>
}
 
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


Output:
CURD Operations in ASP.NET MVC using jQuery dialog with EF

CURD Operations in ASP.NET MVC using jQuery dialog with EF


Detail  View :


@model CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Details";
}
<fieldset>
    <legend>Employee</legend>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.FullName)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.FullName)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Email)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Email)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Address)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Address)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Town)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Town)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Mobile_No)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Mobile_No)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.EmpID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

 

Output:

CURD Operations in ASP.NET MVC using jQuery dialog with EF

Delete  View:

@model CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Delete";
}
 
<h3>Are you sure you want to delete this?</h3>
<fieldset>
    <legend>Employee</legend>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.FullName)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.FullName)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Email)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Email)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Address)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Address)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Town)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Town)
    </div>
 
    <divclass="display-label">
        @Html.DisplayNameFor(model => model.Mobile_No)
    </div>
    <divclass="display-field">
        @Html.DisplayFor(model => model.Mobile_No)
    </div>
</fieldset>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <p>
        <inputtype="submit"value="Delete"/>
        |
        @Html.ActionLink("Back to List", "Index")
    </p>
}

Output:

CURD Operations in ASP.NET MVC using jQuery dialog with EF

CURD Operations in ASP.NET MVC using jQuery dialog with EF


Controller for Curd Operation using jQuery:
using System.Data;
using System.Linq;
using System.Web.Mvc;
using CURD_Jquery.Models;
namespace CURD_Jquery.Controllers
{
    publicclassEmployeeController : Controller
    {
        privateEmployeeDBContext db = newEmployeeDBContext();
        // GET: /Employee/
        publicActionResult Index()
        {
            return View(db.Employees.ToList());
        }
        // GET: /Employee/Details/5
        publicActionResult Details(int id = 0)
        {
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return HttpNotFound();
            }
            return View(employee);
        }
        // GET: /Employee/Create
        publicActionResult Create()
        {
            return View();
        }
        // POST: /Employee/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        publicActionResult Create(Employee employee, string Command)
        {
            if (ModelState.IsValid)
            {
                db.Employees.Add(employee);
                db.SaveChanges();
                TempData["Msg"] = "Employee has been saved succeessfully";
                return RedirectToAction("Index");
            }
            return View(employee);
        }
        // GET: /Employee/Edit/5
        publicActionResult Edit(int id = 0)
        {
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return HttpNotFound();
            }
            return View(employee);
        }
        // POST: /Employee/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        publicActionResult Edit(Employee employee)
        {
            if (ModelState.IsValid)
            {
                db.Entry(employee).State = EntityState.Modified;
                db.SaveChanges();
                TempData["Msg"] = "Employee has been updated succeessfully";
                return RedirectToAction("Index");
            }
            return View(employee);
        }
        // GET: /Employee/Delete/5
        publicActionResult Delete(int id = 0)
        {
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return HttpNotFound();
            }
            return View(employee);
        }
        // POST: /Employee/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        publicActionResult DeleteConfirmed(int id)
        {
            Employee employee = db.Employees.Find(id);
            db.Employees.Remove(employee);
            db.SaveChanges();
            TempData["Msg"] = "Employee has been deleted succeessfully";
            return RedirectToAction("Index");
        }
        protectedoverridevoid Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

 

 


 

asp.netasp.net jquery asp.net mvc mvc entity framework jquery ui 
Updated 07-Sep-2019
Anupam Mishra

Anupam Mishra

Follow

Leave Comment

1 Comments

View All Comments
Mahfuzur Rahman

Mahfuzur Rahman

16-Apr-2016
This is the easiest tutorial I've ever seen . but in my case  $("#dialog-alert").dialog is not working so that the dialog  is not showing  . i'm using  jquery1.10.2.js . yaa data is storing but no dialog even the java script code is not executing . can you describe this problem . Thanks in advance
MindStick Training

Comments

Liked By